import React, { Component } from 'react'
import { Carousel, Flex, Grid } from 'antd-mobile';
import SearchHeader from '../../components/SearchHeader';
import {getCurrentCity} from '../../utils'
import { BASE_URL } from '../../utils';
import './index.sass'
// 导入导航栏图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
// 导航菜单数据
const navs = [
  {
    id: 1,
    img: Nav1,
    title: '整租',
    path: '/home/list'
  },
  {
    id: 2,
    img: Nav2,
    title: '合租',
    path: '/home/list'
  },
  {
    id: 3,
    img: Nav3,
    title: '地图找房',
    path: '/map'
  },
  {
    id: 4,
    img: Nav4,
    title: '去出租',
    path: '/rent/add'
  }
]
const area = 'AREA%7C88cff55c-aaa4-e2e0'
navigator.geolocation.getCurrentPosition(position=>{
  console.log(position)
})
export default class Index extends Component {
  state = {
    //轮播图数组
    swipers: [],
    isShowSiwpers: false,
    data: ['1', '2', '3'],
    //租房小组
    groups: [],
    news: [],
    curCityName:'上海'
  }
  
  async getSwipers() {
    let res = await this.$API.get('/home/swiper');
    this.setState({
      swipers: res,
      isShowSiwpers: true
    })
  }
  async getGroups() {
    let res = await this.$API.get('/home/groups', {
      params: {
        area: area
      }
    })
    this.setState({
      groups: res
    })
  }
  async getNews() {
    let res = await this.$API.get('/home/news', {
      params: {
        area: area
      }
    })
    this.setState({
      news: res
    })
  }
  async getCurCity(){
    let curCity=await getCurrentCity()
    this.setState({
      curCityName:curCity.label
    })
  }
  componentDidMount() {
    this.getSwipers()
    this.getGroups()
    this.getNews()
    //通过ip地位获取到当前城市名称
    this.getCurCity()
    console.log(BASE_URL);
    
  }
  renderNav() {
    return navs.map(i =>
      <Flex.Item key={i.id}>
        <img src={i.img} alt="" />
        <h2>{i.title}</h2>
      </Flex.Item>
    )
  }
  renderSwipers() {
    return this.state.swipers.map(i =>
      <img
        key={i.id}
        src={BASE_URL + i.imgSrc}
        style={{ width: '100%', verticalAlign: 'top', height: 212 }}
      />
    )
  }
  render() {
    return (
      <div className="index">
        <div className="swiper">
          {
            this.state.isShowSiwpers ?
              <Carousel autoplay infinite>
                {this.renderSwipers()}
              </Carousel> : ''
          }
          <div className="search-box">
            <SearchHeader cityName={this.state.curCityName} isShowBack={false}/>
          </div>
        </div>
        <div className="nav">
          <Flex>
            {this.renderNav()}
          </Flex>
        </div>
        <div className="group">
          <h3 className="group_title">
            租房小组<span className="more">更多</span>
          </h3>
          <div className="group_main">
            {
              this.state.groups.map(i =>
                <div className="group_item" key={i.id}>
                  <div className="desc">
                    <p className="title">{i.title}</p>
                    <p className="info">{i.desc}</p>
                  </div>
                  <img src={BASE_URL + i.imgSrc} alt="" />
                </div>
              )
            }
          </div>
          <div className="new">
            <h3>最新资讯</h3>
            {
              this.state.news.map(i =>
                <div className="item_box" key={i.id}>
                  <img src={BASE_URL + i.imgSrc} alt="" />
                  <div className="info_box">
                    <div className="title">{i.title}</div>
                    <div className="foot_box">
                      <span>{i.from}</span>
                      <span>{i.date}</span>
                    </div>
                  </div>
                </div>
              )
            }
          </div>
        </div>
      </div>
    )
  }
}
